<template>
  <el-drawer
    v-model="renderVisible"
    :title="props.title"
    destroy-on-close
    :size="props.size"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
  >
    <div class="global-drawer-tabs-separate" v-loading="isLoading">
      <el-tabs v-model="tabsData.active">
        <el-tab-pane
          v-for="item in tabsData.list"
          :key="item.name"
          :label="item.label"
          :name="item.name"
        ></el-tab-pane>
      </el-tabs>

      <div class="separate-main" v-if="detailData">
        <component
          :is="getComponentName"
          :rowData="props.rowData"
          :detailData="detailData"
          @onRefresh="requestDataDetail"
        />
      </div>
    </div>
  </el-drawer>
</template>

<script setup lang="ts">
import { reactive, PropType, watch, computed, markRaw, ref } from 'vue';
import { getUsersDetail } from '@/apis/users';

import DetailInfo from './detail-info.vue';
import DetailTrade from './detail-trade.vue';
import DetailTeam from './detail-team.vue';

const isLoading = ref(true);

const detailData = ref<API.user.EntitySchema | undefined>();

// tabs
const tabsData = reactive({
  active: '',
  list: [
    {
      label: '基本信息',
      name: 'info',
      component: markRaw(DetailInfo)
    },
    {
      label: '交易信息',
      name: 'trade',
      component: markRaw(DetailTrade)
    },
    {
      label: '上下级团队',
      name: 'team',
      component: markRaw(DetailTeam)
    }
  ]
});

// 初始化tabs
const initTabs = () => {
  const name = props.tabsActive || tabsData.list[0].name;
  tabsData.active = name;
};

// props
const props = defineProps({
  modelValue: {
    type: Boolean,
    default: false
  },

  title: String,

  size: {
    type: [String, Number],
    default: '30%'
  },

  isEdit: {
    type: Boolean,
    default: false
  },

  // tab选中菜单
  tabsActive: {
    type: String,
    default: ''
  },

  rowData: {
    // type: Object as PropType<TempsPost>,
    type: Object as PropType<API.user.EntitySchema>,
    default: () => ({})
  }
});

// emits
const emits = defineEmits(['update:modelValue', 'onRefresh']);

// computed - 抽屉[显示|隐藏]
const renderVisible = computed({
  get: () => props.modelValue,
  set: (val) => {
    emits('update:modelValue', val);
  }
});

// computed - 动态组件
const getComponentName = computed(() => {
  const name = tabsData.active;
  const tabData = tabsData.list.find((item) => item.name === name);
  if (!tabData) return '';
  return tabData.component;
});

// watch
watch(
  () => props.modelValue,
  (val) => {
    if (!val) return;

    // 初始化tabs
    initTabs();

    // 从接口拿数据
    requestDataDetail();

    // // 当rowData发生变化，初始化数据
    // loopPropAssignment(formData, props.rowData);
  },
  {
    immediate: true
  }
);

// 获取详情
const requestDataDetail = () => {
  isLoading.value = true;
  getUsersDetail(props.rowData.ownId!)
    .then((res) => {
      isLoading.value = false;
      detailData.value = res.data;
    })
    .catch(() => {
      isLoading.value = false;
    });
};
</script>

<style lang="scss" scoped></style>
